<script>
export default {
  name: "teacher",
  data() {
    return {
      teachers: [], // 教师数据列表
      currentPage: 1, // 当前页码
      total: 0, // 数据总条数
      pageSize: 8, // 每页显示条数
      queryId: "", // 查询条件：教师ID
      queryName: "", // 查询条件：教师姓名
    };
  },
  methods: {
    // 获取教师数据
    fetchTeachers(page = 1) {
      const { queryId, queryName, pageSize } = this;

      // 调用后端接口，获取教师数据
      this.$axios
          .get("/manager-teacher/select", {
            params: {
              id: queryId || undefined, // 仅在有值时传递 ID
              teacherName: queryName || undefined, // 仅在有值时传递姓名
              currentPage: page,
              pageSize,
            },
            headers: {
              Authorization: localStorage.getItem("token")
            }
          })
          .then((response) => {
            const data = response.data.data;
            this.teachers = data.records || []; // 教师列表数据
            this.currentPage = data.current; // 当前页码
            this.total = data.total; // 总条数
          })
          .catch((error) => {
            console.error("教师数据查询失败：", error);
            this.$message.error("无法获取教师数据，请稍后重试");
          });
    },

    editTeacher(teacherId) {
      this.$router.push(`/admin/teacher/${teacherId}/edit`);
    },

    goToAddTeacher() {
      this.$router.push("/admin/teacher/add");
    },
    // 重置查询条件
    resetQuery() {
      this.queryId = "";
      this.queryName = "";
      this.fetchTeachers(1); // 重置查询后重新加载数据
    },


  // 删除教师
  async deleteTeacher(teacherId) {
    try {
      // 显示确认对话框
      await this.$confirm('确认删除该教师吗？此操作不可恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      });

      // 调用删除接口
      const res = await this.$axios.delete(`/manager-teacher/delete/${teacherId}`);

      if (res.data.code === 200) {
        this.$message.success('删除成功');
        // 重新加载数据
        this.fetchTeachers(this.currentPage);
      } else {
        this.$message.error(res.data.msg || '删除失败');
      }
    } catch (error) {
      if (error !== 'cancel') {
        console.error('删除教师失败：', error);
        this.$message.error('删除失败，请稍后重试');
      }
    }
  },},
  mounted() {
    this.fetchTeachers(); // 页面加载时获取教师数据
  },
};
</script>
<template>
  <div class="teacher-management">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :span="8">
        <div class="stat-card">
          <div class="stat-icon">👨‍🏫</div>
          <div class="stat-info">
            <div class="stat-value">{{ total }}</div>
            <div class="stat-label">总教师数</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-header">
        <h2>教师管理</h2>
        <el-button
            type="primary"
            @click="goToAddTeacher"
            class="add-button"
        >
          <i class="el-icon-plus"></i> 新增教师
        </el-button>
      </div>

      <div class="search-form">
        <el-input
            v-model="queryId"
            placeholder="输入教师ID查询"
            prefix-icon="el-icon-search"
            clearable
        >
        </el-input>
        <el-input
            v-model="queryName"
            placeholder="输入教师姓名查询"
            prefix-icon="el-icon-user"
            clearable
        >
        </el-input>
        <div class="search-buttons">
          <el-button type="primary" @click="fetchTeachers(1)">
            <i class="el-icon-search"></i> 查询
          </el-button>
          <el-button @click="resetQuery">
            <i class="el-icon-refresh"></i> 重置
          </el-button>
        </div>
      </div>
    </div>

    <!-- 教师列表 -->
    <div class="teacher-grid" v-if="teachers.length">
      <div v-for="teacher in teachers"
           :key="teacher.id"
           class="teacher-card"
      >
        <div class="teacher-card-inner">
          <div class="teacher-image">
            <img :src="teacher.actUrls || 'default-avatar.png'" :alt="teacher.teacherName" />
          </div>
          <div class="teacher-content">
            <div class="teacher-header">
              <h3>{{ teacher.teacherName }}</h3>
              <el-tag size="small" effect="dark" type="success">
                {{ teacher.subject }}
              </el-tag>
            </div>
            <div class="teacher-info">
              <div class="info-item">
                <i class="el-icon-office-building"></i>
                {{ teacher.school }}
              </div>
              <div class="info-item">
                <i class="el-icon-medal"></i>
                {{ teacher.profession }}
              </div>
            </div>
            <div class="teacher-intro">
              {{ teacher.introduce ? teacher.introduce.substring(0, 100) + '...' : '暂无介绍' }}
            </div>
            <div class="teacher-actions">
              <el-button
                  type="primary"
                  plain
                  size="small"
                  @click="editTeacher(teacher.id)"
              >
                编辑资料
              </el-button>
              <el-button
                  type="danger"
                  plain
                  size="small"
                  @click="deleteTeacher(teacher.id)"
              >
                删除
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-empty
        v-else
        description="暂无教师数据"
        :image-size="200"
    />

    <!-- 分页 -->
    <el-pagination
        v-if="total > 0"
        class="pagination"
        background
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next, jumper"
        @current-change="fetchTeachers"
    >
    </el-pagination>
  </div>
</template>

<style lang="scss" scoped>
.teacher-management {
  padding: 24px;
  background-color: #f6f8fa;
  min-height: 100vh;

  // 统计卡片
  .stat-cards {
    margin-bottom: 24px;

    .stat-card {
     // background: linear-gradient(135deg, #6366f1, #8b5cf6);
      padding: 24px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      color: black;
      box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);

      .stat-icon {
        font-size: 36px;
        margin-right: 20px;
      }

      .stat-info {
        .stat-value {
          font-size: 32px;
          font-weight: 600;
          line-height: 1;
          margin-bottom: 8px;
        }

        .stat-label {
          font-size: 14px;
          opacity: 0.9;
        }
      }
    }
  }

  // 搜索区域
  .search-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

    .search-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      h2 {
        font-size: 24px;
        color: #1f2937;
        margin: 0;
      }

      .add-button {
        background: linear-gradient(135deg, #10b981, #059669);
        border: none;
        padding: 10px 24px;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
        }
      }
    }

    .search-form {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;

      .el-input {
        max-width: 300px;
      }

      .search-buttons {
        display: flex;
        gap: 8px;
      }
    }
  }

  // 教师卡片网格
  .teacher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 24px;

    .teacher-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
      }

      .teacher-card-inner {
        .teacher-image {
          height: 200px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;

            &:hover {
              transform: scale(1.05);
            }
          }
        }

        .teacher-content {
          padding: 20px;

          .teacher-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;

            h3 {
              margin: 0;
              font-size: 18px;
              color: #1f2937;
            }
          }

          .teacher-info {
            margin-bottom: 16px;

            .info-item {
              display: flex;
              align-items: center;
              margin-bottom: 8px;
              color: #6b7280;

              i {
                margin-right: 8px;
                font-size: 16px;
              }
            }
          }

          .teacher-intro {
            color: #6b7280;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 16px;
            height: 70px;
            overflow: hidden;
          }

          .teacher-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;  // 添加按钮间距

            .el-button {
              padding: 8px 16px;

              &.el-button--danger {
                &:hover {
                  background-color: #f56c6c;
                  color: white;
                }
              }
            }
          }
        }
      }
    }
  }

  // 分页
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .teacher-management {
    padding: 16px;

    .search-form {
      flex-direction: column;

      .el-input {
        max-width: 100%;
      }
    }

    .teacher-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>